<template>
	<view class="containers">
		 <scroll-view
		          :scroll-top="scrollTop"
		          scroll-y="true"
		          class="scroll-Y"
				  style="height:90vh;" 
		        >
		<view class="top" :style="{ backgroundImage: 'url(' + hbbj + ')' }">
			<text @click="chanageTab(1)" :class="[model.type == 1 ? 'hb' : '']">全平台红包</text>
			<text @click="chanageTab(2)" :class="[model.type == 2 ? 'hb' : '']">板块内红包</text>
		</view>
		<view v-if="model.type == 2" class="u-m-l-20">
				<u-form class="bknhb" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="我的名称" prop="companyName">
						<u-input :border="border" placeholder="请输入" v-model="model.companyName" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包描述" label-width="250" prop="cate">
						<u-checkbox-group v-model="model.cate" @change="hbmsChange">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包金额" prop="money">
						<u-input :border="border" placeholder="请输入智汇币" v-model="model.money" @blur="showMoney" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" border-bottom="false" label-width="200" :label-position="labelPosition" label="红包个数" prop="num">
						<u-input :border="border" placeholder="请输入个数" v-model="model.num" type="text" input-align="right"></u-input>
					</u-form-item>
				</u-form>
				<u-form-item class="zwpj u-m-r-30 " :label-position="labelPosition"  prop="remark">
					<u-input  type="textarea" :border="border" placeholder="请输入您的祝福语吧！" v-model="model.remark" />
				</u-form-item>
				<view class="">
					<view class="jq">
						<text class="">￥{{money}}</text>
					</view>
					
					<u-button class="button" @click="onClick">塞钱进红包</u-button>
				</view>
		</view>
		<view v-if="model.type == 1" class="u-m-l-20">
				<u-form class="qpthb" :required="required" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="我的名称" prop="companyName">
						<u-input :border="border" placeholder="请输入我的名称" v-model="model.companyName" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包描述" label-width="250" prop="cate">
						<u-checkbox-group v-model="model.cate" @change="hbmsChange">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包范围" label-width="250" prop="ranges">
						<u-checkbox-group v-model="model.ranges" @change="hbfwChange">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList1" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="到账方式" label-width="250" prop="payMethod">
						<u-checkbox-group v-model="model.payMethod" @change="dzfsChange">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList2" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item :required="required" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包金额" prop="money">
						<u-input :border="border" placeholder="请输入智汇币" v-model="model.money" type="text" @blur="showMoney" input-align="right"></u-input>
					</u-form-item>
					<u-form-item :required="required" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包个数" prop="num">
						<u-input :border="border" placeholder="请输入个数" v-model="model.num" type="text" input-align="right"></u-input>
					</u-form-item>
				</u-form>
				<u-form-item class="  zwpj  u-m-r-30 " :label-position="labelPosition"  prop="remark">
					<u-input  type="textarea" :border="border" placeholder="请输入您的祝福语吧！" v-model="model.remark" />
				</u-form-item>
				<view class="">
					<view class="jq">
						<text class="">￥{{money}}</text>
					</view>
					
					<u-button class="button" @click="onClick">塞钱进红包</u-button>
				</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		name: "m-red",
		props: {
			datas: Array, //数据
			type: { //布局格式，长方形oblong，正方形square
				type: String,
				default: 'square'
			},		
			columnNum: { //每一行有多少个
				type: [Number, String],
				default: 3
			},
			showOutBorder: { //显示外边框
				type: [Boolean, String],
				default: true
			},
			showBorder: { //是否显示border，如果为false，showOutBorder无效
				type: [Boolean, String],
				default: true
			}
		},
		data(){
			return{
				scrollTop: 0,
				  old: {
					scrollTop: 0
				  },
				money:'',
				border:false,
				hbbj:"../../static/img/hbtbbj.png",
				currentTab: 0,
				
				model: {
					"cate": '',
					"companyName": "",
					"money": '',
					"num": '',
					"payMethod": '',
					"ranges": '',
					"remark": "",
					"type": 1
				},
				selectList: [
					{
						value: '测试1',
						label: '测试1'
					},
					{
						value: '测试2',
						label: '测试2'
					},
					{
						value: '测试3',
						label: '测试3'
					}
				],
				checkboxList: [
					{
						name: '推广',
						checked: false,
						disabled: false
					},
					{
						name: '慰问',
						checked: false,
						disabled: false
					},
					{
						name: '娱乐',
						checked: false,
						disabled: false
					},
				],
				checkboxList1: [
					{
						name: '全国',
						checked: false,
						disabled: false
					},
					{
						name: '行业',
						checked: false,
						disabled: false
					},
					{
						name: '同城',
						checked: false,
						disabled: false
					},
				],
				checkboxList2: [
					{
						name: '即时',
						checked: false,
						disabled: false
					},
					{
						name: '页面浏览',
						checked: false,
						disabled: false
					},
				],
				rules: {					
					companyName: [
						{
							required: false,
							message: '请输入企业名称',
							trigger: 'change'
						}
					],
					money: [
						{
							required: false,
							message: '请输入红包金额',
							trigger: 'change'
						}
					],
					num: [
						{
							required: false,
							message: '请输入红包个数',
							trigger: 'change'
						}
					]
				},
				required: false,
				check: false,
				selectStatus: 'close',
				selectShowZyp: false,
				selectShowWs: false,
				selectShowWxy: false,
				selectShowWyx: false,
				selectShowQylx: false,
				selectShowQydy: false,
				selectShowLyxy: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
			}
		},
		methods: {
			 upper: function(e) {
			      console.log(e);
			    },
			    lower: function(e) {
			      console.log(e);
			    },
			    scroll: function(e) {
			      console.log(e);
			      this.old.scrollTop = e.detail.scrollTop;
			    },
			showMoney(e){
				console.log(e);
				this.money = e;
			},
			hbmsChange(e){
				this.model.cate = e.join(',');
			},
			dzfsChange(e){
				this.model.payMethod = e.join(',');
			},
			hbfwChange(e){
				this.model.ranges = e.join(',');
			},
			chanageTab(type){
				this.model.type = type;
			},
			onClick() {
				 this.$emit('click', {
				 	model: this.model
				 })
			}
		}
		
	}
</script>

<style scoped lang="scss">
page,.containers {
	background-color: #F4F4F4;
	overflow: auto;
}
	.top {
		background-repeat: no-repeat;
		background-size: 100% 500rpx;
		background-position: 0 -20px;
	
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 58rpx 30rpx 450rpx 30rpx;
		text{
			color: #FFFFFF;
			font-size: 28rpx;
		}
		.hb{
			width: 226rpx;
			height: 60rpx;
			background: #E04A24;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
		}
		
	}
	.zwpj{
			width: 710rpx;
			height: 193rpx;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #888D99;
			border-radius: 20rpx;
			line-height: 44rpx;
		}
		.bknhb{
			margin-top: -400rpx;
			width: 710rpx;
			height: 470rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}
		.button {
			width: 662rpx;
			margin:50rpx auto 102rpx auto;
			background: #EA5E3A;
			border-radius: 40rpx;
			border: 0;
			color: #fff;
			&.u-hairline-border:after {
				border: 0;
			}
		}
		.jq{
			color: #0D1D36;
			font-size: 50rpx;
			font-weight: bold;
			text-align: center;
			margin-top: 100rpx;
			padding-right:20rpx;
		}
		.qpthb{
			margin-top: -400rpx;
			width: 710rpx;
			height: 700rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}
</style>

